<template>
  <el-dialog
    class="set-milestone-comp"
    title="设置里程碑节点"
    :close-on-click-modal="false"
    :visible="visible"
    :width="$setRem(800)"
    :before-close="handleCancel">
    <div class="content">
      <el-tabs v-model="activeName">
        <el-tab-pane label="总计划里程碑" name="all">
          <div class="search-btn">
            <el-checkbox
              true-label="1"
              false-label="0"
              :value="setMilepostFlag"
              @change="handleChange">
              是否设置里程碑
            </el-checkbox>
          </div>
          <el-table
            class="table-container"
            :data="tableData"
            v-loading="tableLoading"
            element-loading-custom-class="custom-load"
            row-key="uuid">
            <el-table-column label="序号" type="index" width="80"></el-table-column>
            <el-table-column label="任务名称" prop="scheduleName"></el-table-column>
            <el-table-column label="计划开始时间" prop="planStartTime" width="120">
              <template slot-scope="scope">
                <div class="flag">
                  <el-checkbox
                    true-label="1"
                    false-label="0"
                    :value="scope.row.setStartFlag"
                    @change="(val) => handleStartChange(val, scope.row)">
                    {{ scope.row.planStartTime }}
                  </el-checkbox>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="计划完成时间" prop="planEndTime">
              <template slot-scope="scope">
                <div class="flag">
                  <el-checkbox
                    true-label="1"
                    false-label="0"
                    :value="scope.row.setEndFlag"
                    @change="(val) => handleEndChange(val, scope.row)">
                    {{ scope.row.planStartTime }}
                  </el-checkbox>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="开始节点名称">
              <template slot-scope="scope">
                {{scope.row.setStartFlag === '1' ? `${scope.row.scheduleName}开始` : ''}}
              </template>
            </el-table-column>
            <el-table-column label="完成节点名称">
              <template slot-scope="scope">
                {{scope.row.setEndFlag === '1' ? `${scope.row.scheduleName}完成` : ''}}
              </template>
            </el-table-column>
            <div class="empty-content" slot="empty">
              <i class="iconfont iconwushuju"></i>
              <p>暂无数据</p>
            </div>
          </el-table>
          <el-pagination
            v-if="total > 10"
            :page-size="pageSize"
            :current-page="pageNo"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </el-tab-pane>
        <el-tab-pane label="自定义里程碑" name="customize">
          <div class="search-btn">
            <el-button size="mini" @click="handleAdd">
              新增
            </el-button>
          </div>
          <el-table
            class="table-container"
            :data="milestoneData"
            v-loading="milestoneLoading"
            element-loading-custom-class="custom-load"
            row-key="uuid">
            <el-table-column label="序号" type="index" width="80"></el-table-column>
            <el-table-column label="任务名称" prop="milepostName"></el-table-column>
            <el-table-column label="计划节点时间" prop="planTime"></el-table-column>
            <el-table-column label="实际节点时间" prop="actualTime"></el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <span class="btn" @click="handleEdit(scope.row)">编辑</span>
                <span class="btn" @click="handleDelete(scope.row)">删除</span>
              </template>
            </el-table-column>
            <div class="empty-content" slot="empty">
              <i class="iconfont iconwushuju"></i>
              <p>暂无数据</p>
            </div>
          </el-table>
          <el-pagination
            v-if="milestoneTotal > 10"
            :page-size="milestonePageSize"
            :current-page="milestonePageNo"
            layout="total, sizes, prev, pager, next, jumper"
            :total="milestoneTotal"
            @size-change="handleMilestoneSizeChange"
            @current-change="handleMilestoneCurrentChange"
          />
        </el-tab-pane>
      </el-tabs>
      <add-milestone
        :visible="addVisible"
        :loading="addLoading"
        :formData="currentData"
        :scheduleType="scheduleType"
        @submit="handleSetMilestone"
        @cancel="addVisible = false">
      </add-milestone>
    </div>
  </el-dialog>
</template>

<script>
import addMilestone from '@/components/project/progress/addMilestone';

export default {
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    scheduleType: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      activeName: 'all',
      tableData: [],
      tableLoading: false,
      pageSize: 10,
      pageNo: 1,
      total: 0,
      setMilepostFlag: '',
      addType: 'add',
      addVisible: false,
      addLoading: false,
      currentData: {},
      milestoneData: [],
      milestoneLoading: false,
      milestonePageSize: 10,
      milestonePageNo: 1,
      milestoneTotal: 0
    };
  },
  computed: {
    projectId() {
      return this.$store.state.currentProjectId;
    },
  },
  watch: {
    visible(val) {
      if (val) {
        this.getTableData();
        return;
      }
      this.tableLoading = false;
      this.milestoneLoading = false;
    },
    activeName(val) {
      if (val === 'customize') {
        this.getMilestoneData();
        return;
      }
      this.getTableData();
    }
  },
  components: {
    addMilestone
  },
  methods: {
    // 是否设置里程碑
    handleChange(val) {
      this.setMilepostFlag = val;
      this.getTableData();
    },
    // 关闭、取消
    handleCancel() {
      this.$emit('cancel');
    },
    // 计划开始时间
    handleStartChange(val, row) {
      if (this.scheduleType) {
        this.handleWaterStartChange(val, row);
        return;
      }
      if (val === '1') {
        this.handleSetProgressPlan(row, '1');
        return;
      }
      const { startScheduleMilepost } = row;
      if (!startScheduleMilepost) return;
      this.scheduleMilepostSetList({
        id: startScheduleMilepost.milepostId,
        scheduleId: startScheduleMilepost.scheduleId
      });
    },
    // 计划完成时间
    handleEndChange(val, row) {
      if (this.scheduleType) {
        this.handleWaterEndChange(val, row);
        return;
      }
      if (val === '1') {
        this.handleSetProgressPlan(row, '2');
        return;
      }
      const { endScheduleMilepost } = row;
      if (!endScheduleMilepost) return;
      this.scheduleMilepostSetList({
        id: endScheduleMilepost.milepostId,
        scheduleId: endScheduleMilepost.scheduleId
      });
    },
    // 设置计划时间里程碑
    async handleSetProgressPlan(data = {}, setTimeType) {
      this.tableLoading = true;
      const { success } = await this.$Model.scheduleMilepostSet({
        planTime: data.planStartTime,
        projectId: data.projectId,
        milepostName: `${data.scheduleName}开始`,
        scheduleId: data.id,
        // 设置时间标志；1：开始时间；2：结束时间
        setTimeType
      });
      if (success) {
        this.$emit('change');
        this.$message.success('设置成功');
        this.getTableData();
        this.tableLoading = false;
        return;
      }
      this.tableLoading = false;
    },
    // 水务计划开始时间
    handleWaterStartChange(val, row) {
      if (val === '1') {
        this.handleSetWaterProgressPlan(row, '1', '1');
        return;
      }
      this.handleSetWaterProgressPlan(row, '1', '2');
    },
    // 水务计划完成时间
    handleWaterEndChange(val, row) {
      if (val === '1') {
        this.handleSetWaterProgressPlan(row, '2', '1');
        return;
      }
      this.handleSetWaterProgressPlan(row, '2', '2');
    },
    // 设置计划时间里程碑
    async handleSetWaterProgressPlan(data = {}, setTimeType, operateType) {
      this.tableLoading = true;
      const { success } = await this.$Model.waterScheduleMilepostSet({
        projectId: data.projectId,
        operateType, // （1：保存；2：删除）
        id: data.id,
        // 设置时间标志；1：开始时间；2：结束时间
        setTimeType
      });
      if (success) {
        this.$emit('change');
        this.$message.success('设置成功');
        this.getTableData();
        this.tableLoading = false;
        return;
      }
      this.tableLoading = false;
    },
    // 取消设置里程碑
    async scheduleMilepostSetList(params) {
      this.tableLoading = true;
      const { success } = await this.$Model.scheduleMilepostSetList({
        delMilepostSets: [params]
      });
      if (success) {
        this.$emit('change');
        this.getTableData();
        this.tableLoading = false;
        return;
      }
      this.tableLoading = false;
    },
    clear() {
      if (this.activeName === 'customize') {
        if (this.milestoneData.length === 1) {
          this.milestonePageNo = 1;
          this.milestonePageSize = 10;
        }
        return;
      }
      if (this.tableData.length === 1) {
        this.pageNo = 1;
        this.pageSize = 10;
      }
    },
    // 新增里程碑
    handleAdd() {
      this.currentData = {};
      this.addType = 'add';
      this.addVisible = true;
    },
    // 编辑
    handleEdit(row) {
      this.currentData = { ...row };
      this.addType = 'edit';
      this.addVisible = true;
    },
    // 删除
    handleDelete(row) {
      this.$confirm('此操作将删除该数据, 是否继续?', '提示', {
        type: 'warning'
      }).then(async () => {
        const { success } = await this.$Model.deleteMilepost({
          ids: row.id
        });
        if (success) {
          this.$message.success('删除成功');
          this.clear();
          this.getMilestoneData();
        }
      });
    },
    // 保存设置
    async handleSetMilestone(data) {
      const params = {
        ...data,
        projectId: this.projectId
      };
      if (this.addType === 'edit') params.id = this.currentData.id;
      this.addLoading = true;
      const { success } = this.addType === 'add'
        ? await this.$Model.addMilepost(params)
        : await this.$Model.updateMilepost(params);
      this.addLoading = false;
      if (success) {
        this.$message.success('设置成功');
        this.getMilestoneData();
        this.addVisible = false;
      }
    },
    /**
     * pageSize 改变时会触发
     * @param pageSize 每页条数
     */
    handleMilestoneSizeChange(pageSize) {
      this.milestonePageNo = 1;
      this.milestonePageSize = pageSize;
      this.getMilestoneData();
    },
    /**
     * currentPage 改变时会触发
     * @param pageNo 当前页
     */
    handleMilestoneCurrentChange(pageNo) {
      this.milestonePageNo = pageNo;
      this.getMilestoneData();
    },
    async getMilestoneData(options = {}) {
      const params = {
        pageSize: this.milestonePageSize,
        pageNum: this.milestonePageNo,
        projectId: this.projectId,
        ...options
      };
      this.milestoneLoading = true;
      const { success, data: {
        data
      }} = await this.$Model.getMilepostList(params);
      this.milestoneLoading = false;
      if (success && data) {
        this.milestoneData = data.list || [];
        this.milestoneTotal = data.total || 0;
      }
    },
    /**
     * pageSize 改变时会触发
     * @param pageSize 每页条数
     */
    handleSizeChange(pageSize) {
      this.pageNo = 1;
      this.pageSize = pageSize;
      this.getTableData();
    },
    /**
     * currentPage 改变时会触发
     * @param pageNo 当前页
     */
    handleCurrentChange(pageNo) {
      this.pageNo = pageNo;
      this.getTableData();
    },
    async getTableData(options = {}) {
      const params = {
        pageSize: this.pageSize,
        pageNum: this.pageNo,
        scheduleType: this.scheduleType || '',
        projectId: this.projectId,
        ...options
      };
      if (this.setMilepostFlag === '1') {
        params.setMilepostFlag = this.setMilepostFlag;
      }
      this.tableLoading = true;
      const { success, data: {
        data
      }} = this.scheduleType
        ? await this.$Model.getWaterProgressList(params)
        : await this.$Model.getProgressList(params);
      this.tableLoading = false;
      if (success && data) {
        this.tableData = data.list || [];
        this.total = data.total || 0;
      }
    },
  }
};
</script>

<style scoped lang="scss">
  @import "../../../assets/styles/dialog";

  .set-milestone-comp {
    /deep/ .el-dialog__body {
      min-height: 400px;
      .el-tabs__item {
        color: #fff;
        &.is-active {
          color: #409EFF;
        }
      }
      .btn {
        color: $mainColor;
        cursor: pointer;
        margin-right: 5px;
      }
    }
    .search-btn {
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      margin: 5px 0;
      /deep/ .el-checkbox {
        &.is-checked {
          .el-checkbox__label {
            color: #2eb76f;
          }
        }
        .el-checkbox__label {
          color: #fff;
        }
      }
    }
  }
</style>
